@import '../../../style/base.styl';
@import '/animate.styl';
.container
	padding 32rpx
	.btn-box
		position fixed
		width 100%
		left 0
		padding 32rpx
		box-sizing border-box
		display flex
		flex-wrap wrap
		.btn
			width 30%
			height 98rpx
			display flex
			align-items center
			font-size 34rpx
			color #fff
			border-radius 49rpx
			justify-content center
			background $shallowThemeColor
			margin-bottom 32rpx
			// 加载中动画 - 全局调用放在 app.styl
			.animate
				width 74rpx
				height 74rpx
				background url("")
				background-size auto 37px
				animation btn-rotate 1s steps(12) infinite
				-webkit-animation btn-rotate 1s steps(12) infinite
				transform scale(.8)
		& > view:nth-child(3n-1)
			margin 0 5% 32rpx
	.loading-box
		height 100vh
		display flex
		align-items center
		justify-content center
		font-size 34rpx
		.dotting
			display inline-block
			width 6rpx
			height 6rpx
			box-shadow 6rpx 0 currentColor, 18rpx 0 currentColor, 30rpx 0 currentColor;
			animation dot 2s infinite step-start both
			-webkit-animation dot 2s infinite step-start both
			border-radius 50%
			&:before
				content '...'
			&::before
				content ''
	.mask
		position fixed
		top 0
		right 0
		bottom 0
		left: 0
		margin auto
		width: 260rpx
		height 260rpx
		background-color #fff
		border-radius: 10rpx;
		box-shadow: 0 0 0rpx 2000rpx rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		z-index: 9999;
		line-height: 2.4em;
		&::before
			font-family: "cuIcon";
			display: inline-block;
			margin-right: 6rpx;
		&::after
			content ""
			position absolute
			background-color #fff
			border-radius 50%
			width 200rpx
			height 200rpx
			font-size 20rpx
			border-top 6rpx solid #f2f2f2
			border-right 6rpx solid #f2f2f2
			border-bottom 6rpx solid #f2f2f2
			border-left 6rpx solid #FFA500
			animation rotation 1s infinite linear
			-webkit-animation rotation 1s infinite linear
			z-index -1
		image
			width 70rpx
			height 70rpx

